<script setup>
import { computed, reactive, watch } from "vue"
import { writeClipboard } from "@/hook/universality"
import RlsEdit from "./TimeLineComps/RlsEdit.vue"
import NoteModel from "./TimeLineComps/NoteModel.vue"
import ScreenComp from "./TimeLineComps/ScreenComp.vue"
import { useNote } from "@/stores/note"

const Note = useNote()

// 日记视图，每页显示条数
const setting = reactive({ view: 'mt', page: 30 })
setting.view = Setting.noteSetting.noteView

// 翻页
const load = () => {
  setting.page += 15
  if (setting.page > Note.notes.length) myMsg("没有更多了")
}
// 是否加载完
const noMore = computed(() => setting.page > Note.notes.length)
// watch(() => setting.view, () => setting.page = 30)


// 对note数量限制 + 筛选
const notes = computed(() => {
  if (setting.view == 'sx')
    return Note.notes.filter(note => (screen.screenFunc ? screen.screenFunc(note, screen) : true))
  return Note.notes.slice(0, setting.page)
})

// 划分note列表的视图
const notesView = computed(() => {
  // console.log(notes.value.slice(0, setting.page).length)
  if (setting.view == 'sx') return Note.getView(notes.value.slice(0, setting.page))['xx']
  return Note.getView(notes.value)[setting.view]
})


// 筛选功能=======================================
const screen = reactive({})

const share = () => {
  let noteIds = notes.value.map(note => note.noteId)
  console.log(noteIds)
  // 先设置为公开，再分享
  Note.setType(noteIds, 'public', (data) => {
    // myMsgS(data + '条记录被设为公开')
    let shareUrl = window.URLbase + "/#/note?share=" + noteIds
    writeClipboard(shareUrl, () => myMsgS(data + '条记录的分享链接已经放入剪贴板'))
  })
}

</script>

<template>
  <!-- {{ notesView }} -->
  <RlsEdit />

  <el-row style="margin-bottom:5px">
    <!-- 视图选择和编辑模式 -->
    <el-radio-group v-model="setting.view" size="small" style="margin-right:5px;">
      <el-radio-button label="xx">详细</el-radio-button>
      <el-radio-button label="mt">每天</el-radio-button>
      <el-radio-button label="mz">每周</el-radio-button>
      <el-radio-button label="my">每月</el-radio-button>
      <el-radio-button label="mn">每年</el-radio-button>
      <el-radio-button label="sx">筛选</el-radio-button>
    </el-radio-group>

    <el-popconfirm :title="notes.length + '条记录将被设为公开哦'" confirm-button-text="分享" @confirm="share">
      <template #reference>
        <transition name="el-fade-in">
          <el-button v-show="setting.view == 'sx'" size="small" type="primary">分享</el-button>
        </transition>
      </template>
    </el-popconfirm>
  </el-row>

  <ScreenComp v-if="setting.view == 'sx'" :screen="screen" style="margin-bottom: 5px;" />

  <!-- 时间线开始 -->
  <el-timeline v-infinite-scroll="load" :infinite-scroll-disabled="noMore">
    <el-timeline-item v-for="(mtNote, key) of notesView" :key="key" :timestamp="key" placement="top">
      <NoteModel v-for="note in mtNote" :note="note" :key="note.noteId" style="margin-bottom: 5px">
        <el-button v-if="setting.view == 'sx'" type="primary" plain
          @click="screen.exclude.push(note.noteId)">排除</el-button>
      </NoteModel>
    </el-timeline-item>

    <el-timeline-item timestamp="Origin" placement="top"></el-timeline-item>
  </el-timeline>
</template>

<style scoped lang="less">
// 时间线时间文本
::v-deep(.el-timeline-item__timestamp) {
  color: var(--mini-text-color);
  margin-bottom: 5px;
}

// 时间线节点
::v-deep(.el-timeline-item) {
  padding-bottom: 10px;
}
</style>